<template>
  <view>
    <public-loading></public-loading>
    <z-nav-bar ref="navBar"
             type="transparentFixed"
             bgColor="#fff"
    >
      <template #transparentFixedRight>
        <view class="flex1 df flex-jc-end " style="width: 450rpx;">
          <view class="round_item" @click="callPhone">
            <image src="./static/icon/icon_shop_a.png" mode="aspectFit"></image>
          </view>
          <view class="round_item">
            <image v-if="!shopInfo.favorited" @click="handleCollect(shopInfo.storeId,true)" src="./static/icon/icon_shop_b.png" mode="aspectFit"></image>
            <image  @click="handleCollect(shopInfo.storeId,false)" v-else src="./static/icon/icon_shop_b_active.png" mode="aspectFit"></image>
          </view>
<!--          <view class="round_item">-->
<!--            <image src="./static/icon/icon_shop_c.png" mode="aspectFit"></image>-->
<!--          </view>-->
        </view>
      </template>
    </z-nav-bar>

    <view class="head-box">
      <swiper-x :bannerList="bannerList" :isRadius="false" :height="height" :cornerMarkBottom="'88rpx'"></swiper-x>
    </view>
    <view class="shop-refer-box">
      <view class="name flex-center-between">

        <view class="nameTxt text-ellipsis df align-center ">{{shopInfo.storeShortName}}

        </view>
        <view class="df flex1 mgl-15 flex-center-between" @click="handleShowName">
          <up-tooltip   ref="tooltipRef" v-if="shopInfo.storeFullName" text="长按查看店铺全称" :showCopy="false" :buttons="[shopInfo.storeFullName]"></up-tooltip>
          <text>{{shopInfo.collectStore}}人收藏过</text>
        </view>


      </view>
      <view class="brief" >
        营业时间：{{shopInfo.onlineStartTime}}~{{shopInfo.onlineEndTime}}
      </view>
      <view class="brief" @tap="isBriefAll=true">
        店铺简介：{{shopInfo.description || '暂无' }}
      </view>
      <view class="product flex">
        <view v-if="shopInfo.showTab" v-for="item in shopInfo.showTab.split(',')" :key="item">
          {{item}}
        </view>
<!--        200元包邮商品-->
      </view>
    </view>
    <view class="comment-box flex-center-between">
      <star :starRate="shopInfo.rating" :width="'180rpx'" :height="'32rpx'"></star>
      <view class="comment-right flex-aj-center" @click="handelIsComment"><!-- @tap="isComment=true" -->
        查看评论({{shopInfo.commentCount}})
        <view class="back">
          <back :isRight="true" :borderColor="'#333333'" :padding="'4rpx 0 0 0'"></back>
        </view>
      </view>
    </view>
<!--    点击的具体功能-->
    <view class="nav-box flex ">
      <block v-if="shopInfo.isJoinEnabled">
<!--        :url="`/pagesShop/franchiseStores/join_apply?storeId=${storeId}`"-->
        <navigator style="width: 25%"  hover-class="none">
          <view class="nav-item-1 flex-column-center" @click="handleRealName(storeId)">
            <view class="pic-box flex-aj-center">
              <image src="http://www.xvopen.com/xiaoV/img1/jiameng.png" mode=""></image>
            </view>
            <text>加盟申请</text>
          </view>
        </navigator>
      </block>
      <block v-if="shopInfo.isMemberEnabled">
        <navigator style="width: 25%"  :url="`/pagesMy/user/membership_package?storeId=${shopInfo.storeId}&storeName=${shopData.storeName}`" hover-class="none">
          <view class="nav-item-3 flex-column-center">
            <view class="pic-box flex-aj-center">
              <image src="http://www.xvopen.com/xiaoV/img1/huiyuan.png" mode=""></image>
            </view>
            <text>会员申请</text>
          </view>
        </navigator>
      </block>
      <block v-if="shopInfo.isGroupCardEnabled">
        <navigator style="width: 25%" @click="handleTeam(`/pagesMy/user/card_list?storeId=${shopInfo.storeId}`)"   hover-class="none">
          <view class="nav-item-4 flex-column-center">
            <view class="pic-box flex-aj-center">
              <image src="http://www.xvopen.com/xiaoV/img1/tuanti.png" mode=""></image>
            </view>
            <text>团体申请</text>
          </view>
        </navigator>
      </block>
      <block v-if="shopInfo.idCouponEnabled">

        <view class="nav-item-5 flex-column-center" style="width: 25%"  @tap="isCoupon=true">
          <view class="pic-box flex-aj-center">
            <image src="http://www.xvopen.com/xiaoV/img1/youhui.png" mode=""></image>
          </view>
          <view style="width: 120rpx;">优惠券领取</view>
        </view>
      </block>

    </view>
    <view class="member-box">
      <image v-if="vipInfo.id" src="./static/icon/vip.png" mode=""></image>
      <image v-else src="http://www.xvopen.com/xiaoV/img1/no-vip.png" mode=""></image>
      <view v-if="vipInfo.id" class="meb">


        <view>
          卡内余额：{{ vipInfo.totalAmount}}元  赠金：{{vipInfo.giftBalance ||0}}
        </view>
        <view >

          <text v-if="vipInfo.discountRate ">
            折扣：{{ vipInfo.discountRate }}折
          </text>
          <text v-if="vipInfo.clothingTicketCount>0"> 衣次卡：{{ vipInfo.clothingTicketCount }}</text>
        </view>
        <view v-if="vipInfo.clothingTicketCount>0">
          鞋次卡：{{ vipInfo.shoeTicketCount }}
        </view>
      </view>
      <view v-else class="no-meb">
        暂不是本店会员
      </view>
    </view>
    <view class="add-box">
      <view class="add-content flex-center-between">
        <view>
          <view class="address flex-j-center">
            <view class="flex-aj-center">
              <image src="http://www.xvopen.com/xiaoV/img1/add.png" mode=""></image>
            </view>
            {{shopInfo.storeLocation}}
          </view>
          与我距离{{(store.km).toFixed(3)}}km
        </view>
        <main-button :width="'144rpx'" :height="'48rpx'" :fontSize="'26rpx'" :bgColor="'#0080FF'" :isGradient="false" :color="'#fff'" :border="'none'" @click="oneClickNav">一键导航</main-button>
      </view>
    </view>
    <view class="shop-box">
      <view class="title">
        店铺衣柜
      </view>
      <view class="business flex-center-start" @click="wardrobeOrder(item)" v-for="(item,index) in shopInfo.hemaSmartLockerVos" :key="index">
        <view class="state">
          柜
        </view>
        <view class="contact">
          <view class="bold flex-center-between">
            {{item.deviceName}}
            <view class="tel" @tap="shopTelClick(shopData.customerService)">

            </view>
          </view>
          <view class="add flex-center-between">
            {{item.installationLocation}}
            <view v-if="item.location&&CommonStore.cityInfo.latitude" class="dis flex-aj-center">
              <image src="http://www.xvopen.com/xiaoV/img1/add.png" mode=""></image>
              {{
                getDistance(item.location.split(',')[0],item.location.split(',')[1],CommonStore.cityInfo.latitude,CommonStore.cityInfo.longitude).toFixed(3)}} km
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="bottom-btn-box">
      <main-button @click="btnClick">下单</main-button>
    </view>
    <!-- 优惠券蒙版层 -->
    <block v-if="shopInfo.storeId">
      <ShopCoupon v-model="isCoupon" :couponList="couponList" @getCoupon="handleGetCoupon"></ShopCoupon>
      <ShopComment v-model="isComment" :pictureNum="pictureNum" :commentCount="shopInfo.commentCount"></ShopComment>
    </block>

<!--    v-if="shopInfo.storeId"-->


    <up-modal
      :show="showMSg"
      :content='content'
      :closeOnClickOverlay="true"
      :showCancelButton="true"
      @cancel="close"
      @close="close"
      @confirm="confirm"
    ></up-modal>
<!--    这里是认证的弹窗审核中或者已经申请过了的给提示-->
    <up-modal
      :show="showAuthentication"
      :showCancelButton="true"
      title="提示"
      :closeOnClickOverlay="true"
      @confirm="close"
      @cancel="close"
      @close="close"
      content=''>
      <view class="slot-content">
        {{authenticationMsg}}
      </view>
    </up-modal>
<!--    这个是团体卡之前必须是门店会员才行-->
    <up-modal
      :show="showTeam"
      :showCancelButton="true"
      title="提示"
      :closeOnClickOverlay="true"
      @confirm="close"
      @cancel="close"
      @close="close"
      content=''>
      <view class="slot-content">
        申请人不是当前申请门店的会员，请先成为会员后再进行团体卡！
      </view>
    </up-modal>

    <!-- 店铺全称蒙版层 -->
    <view v-if="isShopNameAll" class="co-popup animated fadeIn faster" style="align-items: flex-start;">
      <view class="co-popup-mask" @tap="isShopNameAll=false"></view>
      <view class="name-all flex">
        店铺全称：
        <view class="cont">
          {{shopInfo.storeFullName}}
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import ShopCoupon from '@/components/shop-coupon/shop-coupon.vue'
import ShopComment from '@/components/shop-comment/shop-comment.vue'
import {useCustomStores} from '@/utils/hook'
import { commonStore } from '@/stores/common'
import  {ref,reactive,toRefs} from "vue"
import { onLoad,onPageScroll,onShareAppMessage,onShareTimeline } from '@dcloudio/uni-app';
import {
  carouselList,
  commentListImageComment, couponAdd,
  couponListByStoreId,
  storeDetailsId,
  systemCouponList
} from '@/api/pagesShop'
import {packageQryUserMember,customerCancelShop} from '@/api/pagesMy/user'
import {customerCollectionShop} from '@/api/home'
import {certificationAuditStatus} from '../api/pagesShop'
const {system:{statusBarInfo},ShopStore,userStore:{userInfo}} = useCustomStores()
const CommonStore =commonStore()
const  store = reactive({
    km:"",
    storeId:'',
    collection:false,
    shopData:{},
    couponList:[],
    shopInfo:{}
})
const vipInfo =ref({
  id:''
})
const showMSg = ref(false)
const showTeam = ref(false)
const showAuthentication = ref(false)
const authenticationMsg= ref('')
const tooltipRef = ref(null)
const content=ref('当前未实名认证,请前往实名认证,完成实名认证后,加盟店铺')
const navBar =ref(null)
const pictureNum = ref(0)
const isCoupon = ref(false)
const isComment = ref(false)
const isShopNameAll = ref(false)
const {shopData,shopInfo,couponList,storeId}=toRefs(store)
const favorited = ref(false)
// 轮播图
let height = ref((262+statusBarInfo.statusBarHeight)+'px;')
const bannerList = ref([])
const loadStoreDetailsId = (option) =>{
  storeDetailsId(option.storeId).then(res=>{
    // bannerList.value = res.data.bannerList
    shopInfo.value = {...res}
    shopInfo.value.favorited = favorited.value
    loadBannerList(res.storeId)
    let location = res.location.split(',')

    ShopStore.setShopInfo({
      ...res,id:option.storeId
    })
    loadVip()
    loadCouponList(res)
    // loadComment()
    store.km= getDistance(location[0],location[1],CommonStore.cityInfo.latitude,CommonStore.cityInfo.longitude)
    console.log(store.km,'store.km')
    // const {shopData,shopInfo}=toRefs(store)
  })
}
//店铺优惠卷
const loadCouponList = (res)=>{
  couponListByStoreId({
    storeId:shopInfo.value.storeId||res.storeId,
    pageNum:1,
    pageSize:30
  }).then(res=>{
    couponList.value = res
    console.log(res,'res')
  })
}
//店铺轮播图
const loadBannerList = (storeId)=>{
  carouselList({
    storeId
  }).then(res=>{
    // console.log(res,'res')
    bannerList.value = res.map(item=>{
      return {
        pic:item.imageUrl,
        ...item
      }
    })
  })
}
//领取优惠卷
const handleGetCoupon = ({item, callback})=>{
  if(!item.available) {
    uni.showToast({
      title: '该券已领取或不可领取',
      icon: 'none'
    });
    return;
  }

  couponAdd({
    couponId: item.couponId,
    userId: userInfo.userId,
    status: 0
  }).then(res => {
    uni.showToast({
      title: '领取成功',
      icon: 'none',
      duration: 2000
    });

    // 执行回调更新子组件状态
    if(callback) callback();
  })
}
const loadComment =()=>{
  // commentListImageComment({
  //   storeId: shopInfo.value.storeId
  // }).then(res=>{
  //   pictureNum.value = res
  // })
}
const btnClick =()=>{
  uni.navigateTo({
    url:`/pages/cleaningOrder/index?storeId=${shopInfo.value.storeId}`
  })
}
function  wardrobeOrder(item){
  uni.navigateTo({
    url:`/pages/cleaningOrder/index?storeId=${shopInfo.value.storeId}&device_code=${item.deviceCode}`
  })
}
//查询用户的会员支付
function loadVip(){
  packageQryUserMember({
    storeId:shopInfo.value.storeId,
    userId:userInfo.userId
  }).then(res=>{
    vipInfo.value = res ||{}
  })
}
function oneClickNav(){
  let list =shopInfo.value.location.split(',')
  wx.openLocation({
    latitude:Number(list[0]) ,
    longitude: Number(list[1]),
    name: shopInfo.value.storeLocation,
    scale: 15
  })
}
function getDistance(lat1, lng1, lat2, lng2) {
  const R = 6371000; // 地球平均半径，单位：米
  const φ1 = lat1 * Math.PI / 180;
  const φ2 = lat2 * Math.PI / 180;
  const Δφ = (lat2 - lat1) * Math.PI / 180;
  const Δλ = (lng2 - lng1) * Math.PI / 180;

  const a = Math.sin(Δφ/2) * Math.sin(Δφ/2) +
    Math.cos(φ1) * Math.cos(φ2) *
    Math.sin(Δλ/2) * Math.sin(Δλ/2);

  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));

  return R * c/1000; // 返回两点间的距离，单位：米
}
const handleCollect =(id,flag)=>{
  if(flag){
    customerCollectionShop({storeId:id}).then(res=>{
      shopInfo.value.favorited = true
      uni.$emit('refreshList')
    })
  }else {
    customerCancelShop({
      storeIds:[id]
    }).then(res=>{
      shopInfo.value.favorited = false
      uni.$emit('refreshList')

    })
  }
}
const handleRealName =(storeId)=>{
  if(!userInfo.idCard){
    showMSg.value = true
    return
  }
  /*********二次校验**************/
  certificationAuditStatus(shopInfo.value.storeId).then(res=>{
    if(!res){
      // /pagesShop/self_support_apply?type=2&storeId=${storeId}`
      uni.navigateTo({
        url:`/pagesShop/self_support_apply?storeId=${storeId}&type=2`
      })
    }
    console.log(res,'res')
    //首先判断一下给提示
    const {status} = res
    if(status == 1){
      showAuthentication.value = true
      authenticationMsg.value = '已提交加盟申请,请耐心等待审核结果'
      return
    }
    if(status == 2){
      showAuthentication.value = true
      authenticationMsg.value = '已经申请过了,请勿重复申请'
      return
    }

    uni.navigateTo({
      url:`/pagesShop/self_support_apply?storeId=${storeId}&type=2`
    })
    // uni.navigateTo({
    //   url:`/pagesShop/franchiseStores/join_apply?storeId=${storeId}`
    // })

  })


}
const close=()=>{
  showMSg.value = false
  showAuthentication.value  =false
  showTeam.value = false
}
const handelIsComment =()=>{
  console.log(store.shopInfo,'store.shopInfo')
  isComment.value = true
  console.log('isComment value:', isComment.value)
}
const handleTeam = (url)=>{
  if(!vipInfo.value.id){
    showTeam.value = true
    return
  }
  uni.navigateTo({
    url
  })
}
const confirm =()=>{
  showMSg.value = false
  uni.navigateTo({
    url:`/pagesMy/real_name_auth`
  })
}
const callPhone =()=>{
  uni.makePhoneCall({
    phoneNumber: shopInfo.value.customerServicePhone
  })
}
const handleShowName =()=>{
  console.log('  tooltipRef.value', tooltipRef.value)
  tooltipRef.value.handleClick()

}

onLoad(async (option)=>{
  store.storeId = option.storeId
  if(option.favorited){
    favorited.value = option.favorited ==1? true:false
    console.log(favorited.value,'favorited.value')
  }
  await loadStoreDetailsId(option)
})
onPageScroll (e=>{
   navBar.value.pageScroll(e);
})
onShareAppMessage(() => {
  return {
    title: '店铺详情',
    path: `/pagesShop/shop_details?storeId=${store.storeId}`,
    // imageUrl: '你的分享图片地址'
  }
})
onShareAppMessage(() => {
  return {
    title: '店铺详情',
    path: `/pagesShop/shop_details?storeId=${store.storeId}`,

  }
})
</script>

<style lang="scss">
.head-box{
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.round_item{
  width: 54rpx;
  height: 54rpx;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20rpx;
  image{
    width: 54rpx;
    height: 54rpx;
  }
  //image.active{
  //  width: 35rpx;
  //  height: 35rpx;
  //}
}
.shop-refer-box{
  padding: 32rpx 32rpx 0;
  border-radius: 32rpx 32rpx 0rpx 0rpx;
  background-color: #fff;
  margin-top: 400rpx;
  .name{
    color: #636363;
    border-bottom: 1rpx solid $uni-border-color;
    padding-bottom: 16rpx;
    position: relative;
    .tips{
      width: 170rpx;
      height: 38rpx;
      line-height: 38rpx;
      justify-content: center;
      //position: absolute;
      //bottom: 70rpx;
      //left: 340rpx;
      background-color: rgba(0, 0, 0, 0.6);
      color: #fff;
      font-size: 22rpx;
      border-radius: 12rpx;
      //.triangle{
      //  position: absolute;
      //  top: 38rpx;
      //  left: 20rpx;
      //  width: 0;
      //  height: 0;
      //  border-top: 12rpx solid rgba(0, 0, 0, 0.6);
      //  border-right: 14rpx solid transparent;
      //  border-left: 14rpx solid transparent;
      //  border-bottom: 12rpx solid transparent;
      //  border-radius: 4rpx 4rpx 0 0;
      //}
    }
    .nameTxt{
      font-size: 36rpx;
      color: #000000;
      font-weight: bold;
      //max-width: 500rpx;
    }
  }
  .brief{
    margin: 20rpx 0 17rpx;
  }
  .product{
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid $uni-border-color;
    view{
      width: 104rpx;
      height: 38rpx;
      line-height: 38rpx;
      text-align: center;
      border-radius: 4rpx;
      background-color: #00CBFF;
      background-image: linear-gradient(135deg, #00CBFF 0%, #0080FF 100%);
      font-size: 22rpx;
      color: #fff;
      margin-right: 8rpx;
    }
  }
}
.comment-box{
  padding: 24rpx 32rpx;
  background-color: #fff;
  border-bottom: 16rpx solid #F6F6F6;
  .comment-right{
    .back{
      margin-left: 4rpx;
    }
  }
}
.nav-box{
  padding: 40rpx 16rpx 24rpx;
  background-color: #fff;
  width: 100%;
  .nav-item-1,.nav-item-2,.nav-item-3,.nav-item-4,.nav-item-5{
    box-sizing: border-box;
    font-size: 24rpx;
    color: #000;
    padding: 0 12rpx;
    width:100%;
    .pic-box{
      width: 80rpx;
      height: 80rpx;
      border-radius: 16rpx;
      margin: 0 20rpx 12rpx;
    }
    image{
      width: 80rpx;
      height: 80rpx;
      border-radius: 16rpx;
    }
  }
  .nav-item-1 .pic-box{
    background-color: #84C1FF;
    background-image: linear-gradient(90deg, #84C1FF 0%, #1966E9 100%);
  }
  .nav-item-2 .pic-box{
    background-color: #D791FF;
    background-image: linear-gradient(90deg, #D791FF 0%, #8726E8 100%)
  }
  .nav-item-3 .pic-box{
    background-color: #FFEB84;
    background-image: linear-gradient(90deg, #FFEB84 0%, #EBAC00 100%)
  }
  .nav-item-4 .pic-box{
    background-color: #A7F97E;
    background-image: linear-gradient(90deg, #A7F97E 0%, #89C808 100%)
  }
  .nav-item-5 .pic-box{
    background-color: #FF8DB0;
    background-image: linear-gradient(90deg, #FF8DB0 0%, #E8145B 100%)
  }
}
.member-box{
  padding: 0 32rpx 32rpx;
  position: relative;
  font-size: 24rpx;
  background-color: #fff;
  image{
    width: 686rpx;
    height: 198rpx;
    border-radius: 16rpx;
    background-color: #eee;
  }
  .no-meb{
    position: absolute;
    top: 20rpx;left: 56rpx;
    color: #5A5A5A;
  }
  .meb{
    position: absolute;
    bottom: 48rpx;left: 56rpx;
    color: #7E4530;
    view:first-child{
      margin-bottom: 8rpx;
    }
  }
}
.add-box{
  padding: 24rpx 32rpx;
  background-image: url('https://hema-pic-video-bucket.oss-cn-shenzhen.aliyuncs.com/d87bf49b-956a-4505-9bd2-bbf6ee4d97ab_96HGPE7UCeU7ce98cc3d7ce6cf4aa423ee579d9a2380.png');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  .add-content{
    width: 686rpx;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 10rpx 1rpx rgba(0, 0, 0, 0.16);
    padding: 16rpx 24rpx;
    background-color: #fff;
    .address{
      max-width: 400rpx;
      margin-bottom: 8rpx;
      image{
        width: 32rpx;
        height: 32rpx;
        // object-fit: cover;/* 保持图片比例同时覆盖整个容器 */
        margin-right: 8rpx;
      }
    }
  }
}
.shop-box{
  padding: 32rpx 32rpx 300rpx;
  background-color: #fff;
  margin: 0;
  .title{
    font-size: 32rpx;
    color: #000;
    font-weight: bold;
    margin-bottom: 16rpx;
  }
  .business{
    border-top: 1rpx solid $uni-border-color;
    padding: 24rpx 0 24rpx;
    margin: 0;
    .contact{
      width: 676rpx;
      .dis{
        color: #636363;
        image{
          width: 24rpx;height: 24rpx;margin-right: 4rpx;
        }
      }
      .tel{
        font-weight: normal;
        width: 225rpx;
        text-align: right;
      }
    }
  }
}
.shop-box{
  padding: 32rpx 32rpx 300rpx;
  background-color: #fff;
  margin: 0;
  .title{
    font-size: 32rpx;
    color: #000;
    font-weight: bold;
    margin-bottom: 16rpx;
  }
  .business{
    border-top: 1rpx solid $uni-border-color;
    padding: 24rpx 0 24rpx;
    margin: 0;
    .contact{
      width: 676rpx;
      .dis{
        color: #636363;
        image{
          width: 24rpx;height: 24rpx;margin-right: 4rpx;
        }
      }
      .tel{
        font-weight: normal;
        width: 225rpx;
        text-align: right;
      }
    }
  }
}

.name-all,.brief-all,.on-line,.tell,.shop-call,.coupon-box,.comment-mask-box{
  width: 686rpx;
  padding: 20rpx 24rpx;
  background-color: #fff;
  z-index: 100;
  border-radius: 16rpx;
  font-size: 32rpx;
  color: #000;
  .cont{
    width: 470rpx;
  }
  image{
    width: 28rpx;
    height: 28rpx;
    margin: 16rpx;
  }
}
.name-all{
  margin-top: 470rpx;
}
.brief-all{
  margin-top: 456rpx;
  min-height: 215rpx;
}
.on-line{
  color: #0080FF;
  margin-bottom: 24rpx;
}
.tell{
  color: #EB4C4C;
  margin-bottom: 48rpx;
}
.shop-call{
  width: 542rpx;
  padding: 0;
  .content{
    color: #444;
    margin: 24rpx 0 46rpx;
    view{
      margin-top: 10rpx;
    }
  }
  .call{
    height: 93rpx;
    color: #0080FF;
    font-weight: bold;
    border-top: 1rpx solid rgba(229, 229, 229, 0.6);
  }
}
.coupon-box,.comment-mask-box{
  width: 750rpx;
  border-radius: 32rpx 32rpx 0 0;
  color: #222;
  image{
    margin: 0 8rpx 0 235rpx;
  }
  .title{
    font-weight: bold;
  }
}
.coupon-box{
  height: 882rpx;
  padding: 32rpx 24rpx 164rpx;
  .sub-title{
    font-size: 28rpx;
    color: #000;
    margin-top: 40rpx;
    margin-bottom: 24rpx;
    font-weight: bold;
  }
  .coupon-item{
    width: 702rpx;
    height: 163rpx;
    border-radius: 16rpx;
    background-color: #FFF9F2;
    background-image: linear-gradient(90deg, #FFF9F2 0%, #FFF4EF 100%);
    margin-bottom: 24rpx;
    padding: 20rpx 0;
    position: relative;
    .tips{
      width: 134rpx;
      height: 38rpx;
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 16rpx 0 20rpx 0;
      background-color: #FBE3E1;
      font-size: 22rpx;
      color: #D22C14;
      padding: 4rpx 12rpx;
    }
    .num{
      font-size: 28rpx;
      font-weight: bold;
      color: #D22C14;
      margin-left: 32rpx;
      min-width: 112rpx;
      margin-right: 48rpx;
      text{
        font-size: 60rpx;
      }
    }
    .desc-box{
      font-size: 28rpx;
      color: #000;
      width: 353rpx;
      height: 122rpx;
      border-right: 1rpx dashed #8F8F8F;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      text{
        display: block;
        font-size: 24rpx;
        color: #999;
        margin-top: 4rpx;
      }
    }
    .ment{
      width: 176rpx;
      text-align: center;
      .gray {
        color: #8F8F8F;
      }
      .red {
        color: #D22C14;
      }
    }
  }
}
.comment-mask-box{
  height: 80%;
  padding: 32rpx 16rpx 164rpx 32rpx;
  .head-vessel{
    padding: 40rpx 16rpx 32rpx 0;
    border-bottom: 1rpx solid rgba(229, 229, 229, 0.6);
    view{
      padding: 8rpx 16rpx;
      border-radius: 4rpx;
      color: #5B5B5B;
      background-color: #CCE6FF;
      margin-right: 20rpx;
    }
    .active{
      background-color: #0080FF;
      color: #fff;
    }
  }
  .comment-mask-item{
    padding-bottom: 16rpx;
    .top{
      font-size: 28rpx;
      margin: 24rpx 0 8rpx;
      padding-right: 16rpx;
      image{
        width: 48rpx;
        height: 48rpx;
        border-radius: 50%;
        background-color: #ddd;
        margin: 0 16rpx 0 0;
      }
    }
    .mid{
      font-size: 28rpx;
      color: #999;
      margin-bottom: 12rpx;
      padding-right: 16rpx;
      .type{
        width: 520rpx;
      }
    }
    .bottom{
      .desc{
        margin-bottom: 16rpx;
        padding-right: 16rpx;
      }
      image{
        width: 218rpx;
        height: 218rpx;
        border-radius: 8rpx;
        background-color: #eee;
        margin: 0 16rpx 16rpx 0;
      }
    }
  }
}
.scroll-y{
  height: 88%;
}
.scroll-y-coupon{
  height: 80%;
}
.wash-bottom{
  bottom: 0;
  padding-bottom: 116rpx;
  min-height: 546rpx;
}
//h5 APP
::v-deep .uni-swiper-dots {
  position: absolute;
  bottom: 88rpx !important;
}

// ::v-deep .uni-swiper-dots-horizontal {
// 	left:  314rpx !important;
// }

//微信小程序
::v-deep .wx-swiper-dots {
  position: absolute;
  bottom: 88rpx !important;
  // left: 314rpx !important;
}

// ::v-deep .wx-swiper-dots-horizontal {
// 	left:  314rpx !important;
// }

.hint-middle{
  width: 700rpx;
  min-height: 301rpx;
  min-height: 600rpx;
  border-radius: 20rpx;
  padding-top: 20rpx;
  background-color: #fff;
  position: relative;
  z-index: 100;
  margin-top: -200rpx;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: stretch;
  .btn-box{
    font-size: 32rpx;
    font-weight: bold;
    border-top: 1rpx solid rgba(229, 229, 229, 0.6);
    view{
      width: 50%;
      height: 93rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .cancel{
      color: #999;
      border-right: 1rpx solid rgba(229, 229, 229, 0.6);
    }
    .confirm{
      color: #0080FF;
    }
  }
}
.business_active{
  background-color: rgba(229,229,229,0.3);
  border-radius: 10rpx;
  padding-left: 5rpx;
  padding-right: 5rpx;
}
</style>
